<template>
  <div class="m-3">
    <div class="grid grid-cols-3">
      <div>
        <Input v-model="username" class="w-2/3" placeholder="请输入姓名" style="width: 100px;"></Input>
      </div>
      <div>
        <Button @click="search" type="primary">搜索</Button>
      </div>
    </div>
    <my-table :listColumns="listColumns" :listData="listData"/>

    <Modal
        v-model="showModal"
        title="请假详情"
        @on-ok=" ()=>{showModal=false}"
        @on-cancel="()=>{showModal=false}">
      <div v-if="showData" class="space-y-3">
        <div v-for="(item,idx) in Object.keys(showData)" :key="idx">
          <div v-if="mapping[item]!==undefined" class="p-3 bg-white shadow rounded-lg">
            <h3 class="text-xs border-b">
              {{ mapping[item] }}
            </h3>
            <p class="font-sans">
              {{ showData[item] }}
            </p>
          </div>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import {approveAbsence, getAbsence} from "@/api/absence/absence";
import dayjs from "dayjs";
import MyTable from "@/components/Mytable.vue";

export default {
  name: 'takeOff',
  components: {
    MyTable
  },
  data() {
    return {
      username:'',
      listColumns: [
        {title: '工号', key: 'user_id'},
        { title: '姓名', key: 'username' },
        {title: '部门', key: 'dept_id'},
        {title: '申请时间', key: 'apply_time'},
        {title: '开始时间', key: 'start_time'},
        {title: '结束时间', key: 'end_time'},
        {title: '申请状态', key: 'status'},
        {title: '请假原因', key: 'reason'},
        {title: '请假类型', key: 'type'},
        {
          title: '操作', key: 'operate',
          render: (h, params) => {
            if (params.row.status === "2" ||
                +params.row.status === 2 ||
                params.row.status === "1" ||
                +params.row.status === 1) {
              return h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'

                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.setShowData(params)
                  }
                }
              }, '查看')
            } else {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.setShowData(params)
                    }
                  }
                }, '查看'),
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.approve(params)
                    }
                  }
                }, '通过'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.reject(params)
                    }
                  }
                }, '驳回')
              ]);
            }

          }
        }
      ],
      listData: [],
      showModal: false,
      showData: [],
      mapping: {
        "user_id": "工号",
        "dept_id": "部门",
        "username": "姓名",
        "apply_time": "申请时间",
        "start_time": "开始时间",
        "end_time": "结束时间",
        "status": "申请状态",
        "reason":"请假原因",
        "type":"请假类型"
      }
    }
  },
  created() {
    getAbsence().then(res => {
      this.listData = res.data.data;
      this.listData.forEach(item => {
        item.apply_time = dayjs(item.apply_time).format('YYYY-MM-DD HH:mm:ss');
        item.start_time = dayjs(item.start_time).format('YYYY-MM-DD HH:mm:ss');
        item.end_time = dayjs(item.end_time).format('YYYY-MM-DD HH:mm:ss');
      })
    })
  },
  methods: {
    setShowData: function (param) {
      this.showModal = true;
      this.showData = param.row;
      console.log(this.showData)
    },
    approve: function (param) {
      let user_id = param.row.user_id;
      let form = new FormData();
      form.append("user_id", user_id);
      form.append("status", "2");
      approveAbsence(form).then(res => {
        if (res.data.code === 200)
          this.$Message.success("审批成功");
        else
          this.$Message.error("审批失败");
      }).then(() => {
        getAbsence().then(res => {
          this.listData = res.data.data;
          this.listData.forEach(item => {
            item.apply_time = dayjs(item.apply_time).format('YYYY-MM-DD HH:mm:ss');
            item.start_time = dayjs(item.start_time).format('YYYY-MM-DD HH:mm:ss');
            item.end_time = dayjs(item.end_time).format('YYYY-MM-DD HH:mm:ss');
          })
        })
      })
    },
    search:function (){

      this.username = this.username.trim();
      console.log(this.username)
      console.log(this.listData)
      if(this.username!==''){
        this.listData = this.listData.filter(item => {
          return item.username !== null &&  item.username?.indexOf(this.username) !== -1 && item.username !== ''
        })
      }else{
        getAbsence().then(res=>{
          this.listData = res.data.data;
        })
      }
    },
    reject: function (param) {
      let user_id = param.row.user_id;
      let form = new FormData();
      form.append("user_id", user_id);
      form.append("status", "1");
      approveAbsence(form).then(res => {
        if (res.data.code === 200)
          this.$Message.success("审批成功");
        else
          this.$Message.error("审批失败");
      }).then(() => {
        getAbsence().then(res => {
          this.listData = res.data.data;
          this.listData.forEach(item => {
            item.apply_time = dayjs(item.apply_time).format('YYYY-MM-DD HH:mm:ss');
            item.start_time = dayjs(item.start_time).format('YYYY-MM-DD HH:mm:ss');
            item.end_time = dayjs(item.end_time).format('YYYY-MM-DD HH:mm:ss');
          })
        })
      })

    }
  }
}
</script>
<style scoped></style>